<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>后台管理首页</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/templatemo_main.css" rel="stylesheet">
    <link href="../css/element/index.css" rel="stylesheet">



    <style>
        .navbar-inverse{
            background-color: #428bca;
            border: none;
        }
        .logo h1{
            color: white;
        }

        .templatemo-submenu li a{
            margin-left: 35px;
        }

        [v-cloak]{
            display: none;
        }

        .nav-block{
            background-color: #b3d8ff;
            height: 80px;
            line-height: 80px;
            font-size: 25px;
            text-align: center;
        }

        .badge{
            background-color: white;
            color: black;
            font-size: 16px;
            padding: 3px 10px;
            margin-left: 5px;
        }

        .nav-block a{
            color: white;
        }

    </style>
</head>
<body style="background-color: #E2E2E2;">
<div id="wrapper"  v-cloak>
    <div class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <div class="logo"><h1>电动甄选</h1></div>
            <a href="/front/index.html">
                <i class="fa fa-desktop" style="color: white; font-size: 18px;margin-left:40px; ">

                </i>
            </a>
        </div>
        <div class="dropdown" style="display: inline-block;height: 100%;line-height: 50px;float: right;margin-right: 50px;font-size: 16px;">
            <div class="dropdown-toggle" data-toggle="dropdown"style="cursor: pointer;color: white;">
                <i class="fa fa-user" style="margin-right: 5px;font-size: 18px;"></i>{{user.name}}
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" style="min-width: 120px;margin-left: -20px;">
                 <li><a href="javascript:void(0)"@click="personalPage"><i class="fa fa-user fa-fw"></i>个人信息</a></li>
                <li><a href="javascript:void(0)"@click="logout"> <i class="fa fa-sign-out fa-fw"></i>退出</a></li>
            </ul>
        </div>
    </div>
    <div class="template-page-wrapper">
     <div class="navbar-collapse collapse templatemo-sidebar">
         <ul class="templatemo-sidebar-menu" id="menu-id">
             <li class="active"><a href="index.html"><i class="fa fa-home"></i>首页 </a> </li>
             <li class="sub open">
                 <a href="javascript:;">
                     <i class="fa fa-navicon"></i>信息管理
                     <div class="pull-right"><span class="caret"></span></div>
                 </a>
                 <ul class="templatemo-submenu">
                     <li v-if="authority.indexOf(1) != -1">
                         <a href="adminInfo.html">管理员信息</a>
                     </li>
                     <li v-if="authority.indexOf(2) != -1">
                         <a href="workerInfo.html">工作人员信息</a>
                     </li>
                     <li v-if="authority.indexOf(3) != -1">
                         <a href="userInfo.html">用户信息</a>
                     </li>
                     <li v-if="authority.indexOf(4) != -1">
                         <a href="videoInfo.html">新能源汽车介绍</a>
                     </li>
                     <li v-if="authority.indexOf(5) != -1">
                         <a href="richtextInfo.html">新能源汽车详细信息</a>
                     </li>
                     <li v-if="authority.indexOf(6) != -1">
                         <a href="messageInfo.html">汽车论坛</a>
                     </li>
                     <li v-if="authority.indexOf(1000001) != -1">
                         <a href="noticeInfo.html">公告信息</a>
                     </li>
                     <li v-if="authority.indexOf(1000009) != -1">
                         <a href="typeInfo.html">商品类型信息</a>
                     </li>
                     <li v-if="authority.indexOf(1000010) != -1">
                         <a href="goodsInfo.html">商品详情信息</a>
                     </li>
                     <li v-if="authority.indexOf(1000011) != -1">
                         <a href="orderInfo.html">订单信息</a>
                     </li>
                     <li v-if="authority.indexOf(1000012) != -1">
                         <a href="commentInfo.html">评价信息</a>
                     </li>
                     <li v-if="authority.indexOf(1000013) != -1">
                         <a href="richtextInfoComment.html">汽车评论</a>
                     </li>
                     <li>
                         <a href="javascript:void(0)" @click="personalPage">个人信息</a>
                     </li>

                 </ul>
             </li>
             <li>
                 <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码 </a>

             </li>
             <li>
                 <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录 </a>

             </li>
         </ul>
     </div>
        <div class="templatemo-content-wrapper">
            <div class="templatemo-content">
                <div style="margin-bottom: 20px;">
                    <div class="col-md-3">
                        <div class="nav-block">
                           <a href="#">用户总数<span class="badge">{{totalUser}}</span></a>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="nav-block">
                            <a href="#">交易总额<span class="badge">{{totalPrice}}</span></a>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="nav-block">
                            <a href="#">总销量<span class="badge">{{totalShopping}}</span></a>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12" style="margin-top: 20px;">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <select @change="selectEchartsType" v-model="echartsType">
                                    <option value="pie">饼图</option>
                                    <option value="bar">柱状图</option>
                                </select>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div id="left" style="width: 100%;height: 400px;"></div>
                                    </div>
                                    <div class="col-md-6">
                                        <div id="right" style="width: 100%;height: 400px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/templatemo_script.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/element/index.js"></script>
<script>
    new Vue({
        el:"#wrapper",
        data:{
            user: {},
            authority: [],
            totalUser: 0,    //用户总数
            totalPrice: 0,   //交易总额
            totalShopping: 0,//总销量
            echartsType: 'pie', //要看饼图还是柱状图
            echarsShowLeftArr: [],//分类总销售额列表
            echarsShowRightArr: [],//分类总销量列表


        },
        created: function (){
            this.user = JSON.parse(localStorage.getItem('user'));

            axios.get("/authority").then(res =>{
                if (res.data.code ==='0'){
                    this.authority =res.data.data;

                }else {
                    msg('error',res.data.msg);
                }
            });
            axios.get("/echarts/getTotal").then(res =>{
                    if (res.data.code ==='0'){
                        let map = res.data.data;
                        this.totalUser = map['totalUser'];
                        this.totalPrice = map['totalPrice'];
                        this.totalShopping =map['totalShopping'];
                    }
            });
            this.draw();
        },
        methods: {
            logout(){
                logout();
            },

            //画俩图
            draw(){
                axios.get('/echarts/get/price').then(res => {
                        if (res.data.code ==='0'){
                            this.echarsShowLeftArr = res.data.data;
                            if (this.echarsShowLeftArr.length){
                                let myChart = echarts.init(document.getElementById('left'));
                                let option = this.getEchartsType(this.echarsShowLeftArr,this.echartsType);
                                myChart.setOption(option);
                            }
                        }
                });
                axios.get('/echarts/get/shopping').then(res => {
                    if (res.data.code ==='0'){
                        this.echarsShowRightArr = res.data.data;
                        if (this.echarsShowRightArr.length){
                            let myChart = echarts.init(document.getElementById('right'));
                            let option = this.getEchartsType(this.echarsShowRightArr,this.echartsType);
                            myChart.setOption(option);
                        }
                    }
                });
            },

            //图形类型
            selectEchartsType(){
                let leftChart = echarts.init(document.getElementById('left'));
                let leftOption = this.getEchartsType(this.echarsShowLeftArr,this.echartsType);
                leftChart.setOption(leftOption);

                let rightChart = echarts.init(document.getElementById('right'));
                let rightOption = this.getEchartsType(this.echarsShowRightArr,this.echartsType);
                rightChart.setOption(rightOption);

            },

            //获取当前是饼图还是柱状图
            getEchartsType(echartsArr,type){
                for (let item of echartsArr){
                    if (item.series[0].type === type){
                        return item;
                    }
                }

            }


        }

    });
</script>
</body>
</html>